
<script setup>
import { reactive,onMounted,ref } from 'vue'
import * as echarts from 'echarts'
import { getArticleCategorySize, getCommendArticle, getSiteInfo } from '@/api/dashboard.js'
import { dayjs } from 'element-plus'
defineOptions({
  name: 'Dashboard',
})
const stats = ref({})
/*const recommendArticles = reactive([
  { title: '如何使用 Vue3', author: '张三', views: 234, date: '2024-12-10' },
  {
    title: 'Element Plus 快速上手',
    author: '李四',
    views: 432,
    date: '2024-12-09',
  },
  {
    title: '前后端分离的最佳实践',
    author: '王五',
    views: 123,
    date: '2024-12-08',
  },
  {
    title: '深入理解 Vue3 响应式原理',
    author: '赵六',
    views: 456,
    date: '2024-12-07',
  },
])*/
const recommendArticles = ref([])

let articleCategories = []


const getInfo = async () => {
  let res1 = await getSiteInfo()
  let res2 = await getArticleCategorySize()
  let res3 = await getCommendArticle()
  stats.value = res1.data.data
  articleCategories = res2.data.data
  recommendArticles.value = res3.data.data
  console.log(recommendArticles.data)
  // 需要放在这个里面，不然由于异步函数的特性，放在下面会直接执行过去，articleCategories还没有被赋值，饼图就被渲染了
  echartsInit()
}
// 格式化日期
const formatTime = (time) => {
  return  dayjs(time).format('YYYY年MM月DD日')
}


getInfo()

const echartsInit = () => {
  const chartDom = document.getElementById('pie-chart');
  const myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: '文章分类',
        type: 'pie',
        radius: '50%',
        data: articleCategories.map(category => ({
          name: category.categoryName,
          value: category.articleCount,
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
  myChart.setOption(option);
}

</script>

<template>
  <div class="dashboard">
    <el-row gutter="20">
      <!-- 总文章数 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>总文章数</span>
          </div>
          <div class="card-content">
            <el-statistic :value="stats.articleCount" suffix="篇" />
          </div>
        </el-card>
      </el-col>

      <!-- 今日新增文章 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日新增文章</span>
          </div>
          <div class="card-content">
            <el-statistic :value="stats.addCount" suffix="篇" />
          </div>
        </el-card>
      </el-col>

      <!-- 总阅读量 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>总阅读量</span>
          </div>
          <div class="card-content">
            <el-statistic :value="stats.totalViews" suffix="次" />
          </div>
        </el-card>
      </el-col>

      <!-- 用户数 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>用户数</span>
          </div>
          <div class="card-content">
            <el-statistic :value="stats.userCount" suffix="人" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 文章分类饼状图 -->
    <el-card class="category-chart" shadow="hover">
      <template #header>
        <span>文章分类比例</span>
      </template>
      <div id="pie-chart" style="width: 100%; height: 400px;"></div>
    </el-card>

    <!-- 最近文章 -->
    <el-card class="recommend-articles" shadow="hover">
      <div slot="header" class="clearfix">
        <span>文章推荐</span>
      </div>
      <el-table :data="recommendArticles" border style="width: 100%">
        <el-table-column prop="title" label="文章标题" />
        <el-table-column prop="username" label="作者" />
        <el-table-column  label="阅读量" >
          100
        </el-table-column>
        <el-table-column label="发布时间" >
          <template  #default="{ row }">
            {{ formatTime(row.pub_date) }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>


<style scoped>
.dashboard {
  padding: 20px;
}

.box-card {
  margin-bottom: 20px;
}

.recommend-articles {
  margin-top: 20px;
}

.card-content {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
</style>
